<template>
  <div classs="search-list" :class="{ pcStyle: this.fun.getPhoneEnv() == 3 }">
    <c-title :hide="false" :text="'搜索'"></c-title>
    <van-search v-model="searchValue" placeholder="请输入搜索关键词" />
    <van-dropdown-menu>
      <van-dropdown-item ref="domain">
        <template #title>
          <div>{{ domainName }}</div>
        </template>
        <template #default>
          <div class="warpper">
            <div class="category-name" :class="{ current: form.category_id == item.id }" @click="domain(item)"
              v-for="item in categoryList" :key="item.id">{{ item.title }}</div>
          </div>
        </template>
      </van-dropdown-item>
      <van-dropdown-item ref="distance" v-model="value2">
        <template #title>
          <div>{{ text }}</div>
        </template>
        <template #default>
          <div v-for="item in option2" :key="item.id">
            <div class="distance" :class="{ currentDis: distance == item.text }" @click="change(item)">{{ item.text }}
            </div>
          </div>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="lawyer-platform">
      <div class="lawyer" v-for="(item, i) in listData" :key="i">
        <img :src="item.avatar_image" />
        <div class="info">
          <div class="flex between">
            <span class="name">{{ item.name }}</span>
            <div class="consult"  @click="to(item.id)">立即咨询</div>
          </div>
          <div class="lawyer-detail">
            <span class="title">{{ item.title }}</span>
            <span class="year">执业{{ item.year }}年</span>
          </div>
          <div>
            <span class="domain-nickName" v-for="(category, index) in item.category_data" :key="index">{{
              category.title
            }}<span class="right-line" v-if="item.category_data.length !== index + 1"></span></span>
          </div>
          <div class="footer">
            <div class="lawfirm">
              {{ item.city_name }} | <span>{{ item.lawyer_firm ? item.lawyer_firm.name : "" }}</span>
            </div>
            <div class="footer-distance">{{ item.distance }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from "./components/mixin.js";
export default {
  mixins: [mixins],
  data() {
    return {
      httpUrl: "plugin.lawyer-platform.frontend.controllers.lawyer.getLawyerList",
      lawyerId: "",
      searchValue: "",
      far: 1,
      near: 2,
      domainName: "领域名称",
      value1: 0,
      value2: "b",
      option2: [
        { text: "由近到远", value: "由近到远" },
        { text: "由远到近", value: "由远到近" }
      ],
      categoryList: [],
      text: "距离",
      form: {
        distance_type: "",
        name: "",
        lng: "",
        lat: "",
        category_id: ""
      },
      distance: "",
      point: [],
      myLocation: {},
      listData: [],
      isLoadMore: true,
      page: 1,
      last_page: 1
    };
  },
  created() {
    this.getCategory();
  },
  methods: {
    getSearch(point = "") {
      if (this.myLocation.point) {
        this.form.lng = this.myLocation.point.lng;
        this.form.lat = this.myLocation.point.lat;
      }
      if (this.text !== "距离") {
        this.form.distance_type = this.text == "距离" ? "" : this.text == "由近到远" ? 1 : 2;
      }
      $http.post("plugin.lawyer-platform.frontend.controllers.lawyer.getLawyerList", { ...this.form }).then(res => {
        if (res.result == 1) {
          this.listData = res.data.list.data;
          this.page = res.data.list.current_page;
          this.last_page = res.data.list.last_page;
        }
      });
    },
    getCategory() {
      $http.post("plugin.lawyer-platform.frontend.controllers.lawyer.getCategory").then(res => {
        if (res.result == 1) {
          this.categoryList = res.data.category;
        }
      });
    },
    handle() {
      this.$router.push(this.fun.getUrl("lawyerPlatformApplyFor", {}, { apply_for: "lawYerManagement" }));
    },
    to(id) {
      this.$router.push(this.fun.getUrl("lawyerDetail", { id }, { order_type: "lawyer" }));
    },
    domain(v) {
      if (this.domainName == v.title) {
        this.domainName = "领域名称";
        this.form.category_id = "";
      } else {
        this.domainName = v.title;
        this.form.category_id = v.id;
      }

      this.$refs.domain.toggle();
      this.getSearch();
    },
    change(value) {
      if (this.text == value.text) {
        this.text = "距离";
        this.distance = "";
        this.getSearch();
      } else {
        this.text = value.text;
        this.distance = value.text;
        if (JSON.stringify(this.myLocation) !== "{}") {
          this.form.lng = this.myLocation.point.lng;
          this.form.lat = this.myLocation.point.lat;
          this.getSearch();
        } else {
          this.fun
            .getLocation("正在定位中...")
            .then(res => {
              console.log(res);
              this.address = res.title;
              this.city = res.city;
              this.point = res.point;

              let promise = new Promise((resolve, reject) => {
                this.init(this.point);
                resolve();
              });
              promise.then(() => {
                this.getSearch(point);
              });
            })
            .catch(err => {
              console.log(err);
            });
        }
      }

      this.$refs["distance"].toggle();
    }
  },
  watch: {
    searchValue(name) {
      this.form.name = name;
      if (this.timerId) clearTimeout(this.timerId);
      this.timerId = setTimeout(() => {
        this.getSearch();
      }, 300);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./components/index.scss";

.pcStyle {
  width: 375px;

  ::v-deep .van-dropdown-item--down {
    width: 375px;
    margin: auto;
  }
}

.lawyer-platform {
  background: unset;
  padding: 0.625rem 0.9375rem;

  .domain-nickName {
    position: relative;
    color: #666;
    font-size: 0.75rem;
    border: unset;
    padding: 0;
    margin: 0 0.3125rem 0 0;
    padding-right: 0.3125rem;
  }

  .right-line {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 65%;
    background: #666;
  }

  .consult {
    padding: 0.1875rem 0.625rem;
    border: 1px solid rgba(140, 140, 141, 1);
    border-radius: 0.625rem;
    font-size: 0.6563rem;
  }

  .lawyer {
    display: flex;
    margin-bottom: 1rem;
    box-shadow: 2px 3px 8px rgba(61, 61, 61, 0.25);
    border-radius: 0.625rem;
    padding: 0.625rem;
    background: #fff;

    img {
      margin: 0;
      width: 5.4063rem;
      height: 5.4063rem;
      margin-right: 0.6428rem;
      border-radius: 0.1875rem;
      border: none;
    }
  }
}

::v-deep .van-dropdown-menu__title--active,
.currentDis {
  color: #f5b435;
}

.distance {
  text-align: left;
  margin: 1rem;
}

.btn {
  position: fixed;
  width: 100vw;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0 -2px 7px 0 rgba(213, 213, 213, 0.59);
  padding: 0.5714rem 1.7857rem;

  ::v-deep .van-button--normal {
    width: 100%;
    border-radius: 0.3571rem;
  }
}

.van-search__content {
  border-radius: 1rem !important;
}

.list {
  background-color: #fff;
  padding-bottom: 1rem;
}

.text-left {
  text-align: left;
}

.flex {
  display: flex;
}

.between {
  justify-content: space-between;
}

.mr-1 {
  margin-right: 1rem;
}

.c-6b6b6b {
  color: #6b6b6b;
}

.item {
  display: flex;
  margin-left: 0.714rem;
  margin-top: 1.3571rem;
}

.lawyer-detail {
  display: flex;
  align-items: center;
  margin-top: 0.3125rem;
  margin-bottom: 0.3125rem;

  .title {
    margin-right: 0.3125rem;
  }

  .title,
  .year {
    padding: 0 0.3125rem;
    border-radius: 0.1875rem;
    background: #a78d25;
    color: #fff;
  }
}

#searchList {
  background-color: #fff;
}

.warpper {
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-evenly;
  padding: 1rem;
}

.category-name,
.current {
  padding: 0.1rem 0.6rem;
  // width: 4.285rem;
  height: 1.5714rem;
  // line-height: 1.5714rem;
  border-radius: 2px;
  border: 1px solid #bdbdbd;
  text-align: center;
  margin: 0.2rem;
}

.current {
  border: 1px solid #f5b435;
  color: #f5b435;
}

::v-deep .van-dropdown-menu__bar {
  box-sizing: unset;
}

.footer {
  margin-top: 0.3125rem;
  display: flex;
  justify-content: space-between;
  margin-right: 1rem;
  font-size: 0.75rem;

  .lawfirm {
    font-size: 0.75rem;
    color: #a78d25;
    margin-right: 0.3rem;
  }

  .footer-distance {
    flex-shrink: 0;
    color: #a78d25;
    margin-left: 1.9063rem;
  }
}
</style>
